<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/IncludeTop">
    </div>
        <div id="Content">
            <div id="Welcome">
                <div th:if="${session.account != null}" id="WelcomeContent">
                    <p th:text="'Hi ' + ${session.account.username} + ', welcome to MyPetStore!'">Welcome to MyPetStore!</p>
                </div>
            </div>

            <div th:if="${session.isAdministrator == true}">
                <div id="BackLink">
                    <a href="/catalog/viewAdminmain">Return to Administrator Main Menu</a>
                </div>
            </div>

            <div id="Main">
                <div id="Sidebar">
                    <div id="SidebarContent">
                        <a href="viewCategory?categoryId=FISH"><img src="../images/fish_icon.gif" /></a>
                        <br/> Saltwater, Freshwater <br/>
                        <hr/>
                        <a href="viewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a>
                        <br /> Various Breeds <br />
                        <hr/>
                        <a href="viewCategory?categoryId=CATS"><img src="../images/cats_icon.gif" /></a>
                        <br /> Various Breeds, Exotic Varieties <br />
                        <hr/>
                        <a href="viewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a>
                        <br /> Lizards, Turtles, Snakes <br />
                        <hr/>
                        <a href="viewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a>
                        <br /> Exotic Varieties
                    </div>
                </div>

                <script>
                    var xmlHttpRequest;
                    var cID;
                    function createXMLHttpRequest()
                    {
                        if (window.XMLHttpRequest) //非IE浏览器
                        {
                            xmlHttpRequest = new XMLHttpRequest();
                        }
                        else if (window.ActiveObject)//IE6以上版本的IE浏览器
                        {
                            xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
                        }
                        else //IE6及以下版本IE浏览器
                        {
                            xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
                        }
                    }

                    function showInform(categoryId) {
                        console.log(categoryId);
                        cID = categoryId;
                        sendRequest("/catalog/categoryShowJs?categoryId=" + categoryId);
                    }

                    function sendRequest(url) {
                        createXMLHttpRequest();
                        xmlHttpRequest.open("GET", url, true);
                        xmlHttpRequest.onreadystatechange = processResponse;
                        xmlHttpRequest.send(null);
                    }

                    function processResponse() {
                        if (xmlHttpRequest.readyState == 4) {
                            if (xmlHttpRequest.status == 200) {
                                var resp = xmlHttpRequest.responseText;
                                //显示悬浮层
                                var inform = document.getElementById("inform");

                                if(cID == "Fish"){
                                    inform.style.left = "370px";
                                    inform.style.top = "400px";
                                }
                                else if(cID == "Dogs"){
                                    inform.style.left = "460px";
                                    inform.style.top = "460px";
                                }
                                else if(cID == "Reptiles"){
                                    inform.style.left = "600px";
                                    inform.style.top = "480px";
                                }
                                else if(cID == "Cats"){
                                    inform.style.left = "850px";
                                    inform.style.top = "450px";
                                }
                                else if(cID == "Birds"){
                                    inform.style.left = "800px";
                                    inform.style.top = "200px";
                                }

                                inform.innerText = resp;
                                inform.style.display = "block";
                            }
                        }
                    }

                    //隐藏悬浮层
                    function hiddenInform(event){
                        document.getElementById('inform').style.display='none';
                    }
                </script>

                <div id="MainImage">
                    <div id="MainImageContent">
                        <div id="inform" style="display: none">sssssssssss</div>
                        <map name="estoremap" id="estoremap">
                            <area alt="Birds" coords="176,126,124" href="/catalog/viewCategory?categoryId=BIRDS" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                            <area alt="Fish" coords="37,215,35" href="viewCategory?categoryId=FISH" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                            <area alt="Dogs" coords="95,285,35" href="viewCategory?categoryId=DOGS" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                            <area alt="Reptiles" coords="175,305,35" href="viewCategory?categoryId=REPTILES" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                            <area alt="Cats" coords="260,275,35" href="viewCategory?categoryId=CATS" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                            <area alt="Birds" coords="315,215,35" href="viewCategory?categoryId=BIRDS" shape="circ" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)" onfocus="blur(this)"/>
                        </map>
                        <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350" />
                    </div>
                </div>
                <div id="Separator">&nbsp;</div>
            </div>
        </div>
    <div th:replace="common/IncludeBottom">
    </div>
</body>
</html>